<template>
  <div style="width: 100%; height: 100%;" class="login-background">
    <el-row class="margin-top-log" :gutter="100">
      <el-col :span="6" :offset="9">
        <el-card shadow="always">
          <el-row>
            <div v-if="buttonStatus === 1" style="text-align: center">
              <el-avatar size="large" :src="this.$global.mediaHost + this.avatarUrl"></el-avatar>
            </div>
          </el-row>
          <el-row>
            <el-input placeholder="请输入用户名" v-model="userName"></el-input>
          </el-row>
          <el-row>
            <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
          </el-row>
          <el-row class="text-center">
            <el-button type="primary" @click="login()">
              立即登录
            </el-button>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userName: '',
      pwd: '',
      confirmPwd: '',
      nickName: '',
      avatarId: 1,
      paramsData: {},
      buttonStatus: 1,
      avatarUrl: this.$global.avatarDefault
    }
  },
  methods: {
    /**
     * 登录
     */
    login: function () {
      if (this.checkInput()) {
        this.paramsData.userName = this.userName
        this.paramsData.pwd = this.pwd
        this.$ajax({
          method: 'post',
          headers: this.$global.headers,
          url: this.$global.host + '/v1/manager/login',
          data: JSON.stringify({
            "data": this.paramsData
          }),
        }).then(response => {
          const responseData = response.data.data;
          const responseState = response.data.state
          if (2000 === responseState.code) {
            this.$global.setUser(responseData.user)
            this.$global.setTeamId(responseData.teamId)
            this.$router.push({path: '/homePage'})
          } else {
            this.$message.error({
              message: responseState.msg,
              center: true,
              duration: 1000
            });
          }
        }).catch(function (err) {
          console.log(err)
        })
      }

    },
    checkInput: function () {
      if (this.userName.length < 5 || this.userName.length > 20) {
        this.$message.warning({
          message: '用户名必须输入5~20位字符',
          center: true,
          duration: 1000
        });
        return false;
      }
      if (this.pwd.length < 6 || this.pwd.length > 20) {
        this.$message.warning({
          message: '密码必须输入6~20位字符',
          center: true,
          duration: 1000
        });
        return false;
      }
      return true;
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.text-center {
  text-align: center;
}

.margin-top-log {
  margin-top: 200px;
}
.login-background {
  position: fixed;
  top:0;
  left:0;
  /*以上三句是让整个span放在屏幕的最左上方*/
  height: 100%;
  width: 100%;
  /*以上两句实现全屏大小*/
  background: url("https://media.maixy.top/wode/b2.jpg") no-repeat center 0;/*引入背景图，不重复出现*/
  background-size:cover;/*图片随屏幕大小同步缩放,但是图片画面可能只显示一部分*/
}
</style>
